<template>
    <div>
        <div id="head">
            <h1 style="font-size: 50px;color: white;position: absolute;top: 150px;left: 650px">关于我们</h1>
        </div>
        <el-row>
            <el-col :span="3">
                <p></p>
            </el-col>
            <el-col :span="9">
                <div>
                    <img id="guntong" src="../../assets/guntong.png" alt="">
                    <img style="width: 450px;height:365px;position: absolute;top: 9vh;left: 16vw"
                         src="../../assets/guntong_yifu.png">
                    <div id="one">
                        <p style="font-size: 40px;line-height: 30px">3 6 5</p>
                        <p>天快乐的客户服务</p>
                    </div>
                    <div id="two">
                        <p style="font-size: 40px;line-height: 30px">2 4</p>
                        <p>年洗衣经验</p>
                    </div>

                </div>
            </el-col>
            <el-col :span="2">
                <p></p>
            </el-col>
            <el-col :span="7">
                <div style="color: #0f74ba">
                    <h1 style="text-align: left">给您凉爽，给您舒适</h1>
                    <p style="width: 400px;text-align: left;color: black">
                        您在正确的洗衣店专业清洁。我们始终采用最新的技术和清洁方法，为污渍或敏感织物提供最先进的解决方案。为您提供最安全、清洁、舒适的洗衣体验</p>
                </div>
                <img style="float: left" src="../../assets/fengexian.jpg" alt="">
                <br>
                <br>
                <el-row>
                    <el-col :span="4"><img src="../../assets/zan.png" style="margin-top: 20px"></el-col>
                    <el-col :span="1">
                        <p></p>
                    </el-col>
                    <el-col :span="19" style="text-align: left">
                        <h2 style="color: #0f74ba">100% 客户满意度</h2>
                        <p>我们不只是为你清洁，我们关心你。我们在每一项服务中都带出最好的品质。</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><img src="../../assets/jiangpai.png" style="margin-top: 20px"></el-col>
                    <el-col :span="1">
                        <p></p>
                    </el-col>
                    <el-col :span="19" style="text-align: left">
                        <h2 style="color: #0f74ba">最佳品质</h2>
                        <p>我们使用最新技术的机器。我们很乐意为您提供无可挑剔的衣服。</p>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="2"><p></p></el-col>
            <el-col :span="5" id="o1">
                <el-card class="d1">
                    <img src="../../assets/d1.png" alt="">
                    <h2>可靠</h2>
                </el-card>
                <el-card class="c1">
                    <h2 style="line-height: 60px;margin-top: 40px">可靠</h2>
                    <p style="text-align: left;margin-bottom: 29px">我们提供准确，可靠和道德的服务与我们的专家工作人员。
                        我们为您的品牌应用最快、最可靠的方法。</p>
                </el-card>
            </el-col>
            <el-col :span="5" id="o2">
                <el-card class="d1">
                    <img src="../../assets/d2.png" alt="">
                    <h2>诚信</h2>
                </el-card>
                <el-card class="c1">
                    <h2 style="line-height: 60px;margin-top: 40px">诚信</h2>
                    <p style="text-align: left;margin-bottom: 51px">我们的长期工作一直持续到工作完成。
                        我们与所有与我们合作的公司建立了长期的合作关系。</p>
                </el-card>
            </el-col>
            <el-col :span="5" id="o3">
                <el-card class="d1">
                    <img src="../../assets/d3.png" alt="">
                    <h2>经验</h2>
                </el-card>
                <el-card class="c1">
                    <h2 style="line-height: 60px;margin-top: 40px">经验</h2>
                    <p style="text-align: left;margin-bottom: 73px">由于我们多年来积累的经验该专家提供最新技术设备的服务。</p>
                </el-card>
            </el-col>
            <el-col :span="5" id="o4">
                <el-card class="d1">
                    <img src="../../assets/d4.png" alt="">
                    <h2>专业</h2>
                </el-card>
                <el-card class="c1">
                    <h2 style="line-height: 60px;margin-top: 40px">专业</h2>
                    <p style="text-align: left;margin-bottom: 51px">我们通过提供专业支持来加速您的业务流程。我们为您解决问题，提供即时解决方案。</p>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>
    #head {
        height: 350px;
        background-image: url("../../assets/aboutbackground.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .el-card {
        transition: all 1s;
    }

    .d1 {
        border-radius: 10%;
        color: #0f74ba;
        margin: 20px;
        backface-visibility: hidden;
    }

    .c1 {
        border-radius: 10%;
        color: #0f74ba;
        margin: 20px;
        top: 0;
        width: 18vw;
        position: absolute;
        backface-visibility: hidden;
        transform: rotateX(180deg);
    }

    #o1:hover .c1 {
        transform: rotateX(0deg);
    }

    #o1:hover .d1 {
        transform: rotateX(180deg);
    }

    #o2:hover .c1 {
        transform: rotateX(0deg);
    }

    #o2:hover .d1 {
        transform: rotateX(180deg);
    }

    #o3:hover .c1 {
        transform: rotateX(0deg);
    }

    #o3:hover .d1 {
        transform: rotateX(180deg);
    }

    #o4:hover .c1 {
        transform: rotateX(0deg);
    }

    #o4:hover .d1 {
        transform: rotateX(180deg);
    }

    #guntong {
        width: 500px;
        height: 480px;
        animation: rotateVbtn 5s linear infinite;
    }

    #one {
        width: 150px;
        height: 150px;
        padding: 20px;
        font-size: 22px;
        color: white;
        font-family: kaiti;
        background-color: #0f74ba;
        border-radius: 50%;
        position: absolute;
        top: 9vh;
        left: 34vw;
    }

    #two {
        width: 150px;
        height: 150px;
        padding: 20px;
        font-size: 22px;
        color: white;
        font-family: kaiti;
        background-color: #0f74ba;
        border-radius: 50%;
        position: absolute;
        left: 15vw;
        top: 35vh;
    }

    @keyframes rotateVbtn {
        0% {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg)
        }
    }
</style>